<template>
  <div>
    <el-row :gutter="32">
      <el-col :span="4">
        <el-dropdown>
          <el-button type="primary">
            版本回溯
            <i class='el-icon-arrow-down el-icon--right' />
          </el-button>
          <el-dropdown-menu slot='dropdown'>
            <el-dropdown-item v-for="item in codeList" @click.native="versionChange(item.glueSource)">{{ glueTypeTran(item.glueType) }} {{ item.glueRemark }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="cancel">退 出</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-input v-model="glueCode" placeholder="请输入源代码" type="textarea" resize="none" :autosize="{ minRows: 20}" />
    </el-row>
    <el-dialog title="保存源码" :visible.sync="open" append-to-body>
      <el-form ref="remark" :rules="rules" :model="form">
        <el-form-item label="GLUE备注" prop="remark" >
          <el-input v-model="form.remark" placeholder="请输入glue备注" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="saveCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["glueCodeList","showIde"],
  data() {
    return {
      glueCode: null,
      glueType: null,
      glueId: null,
      form: {
        remark: null,
      },
      codeRemark: null,
      show: this.showIde,
      open: false,
      codeList: this.glueCodeList,
      rules: {
        remark: [
          { required: true, message: "glue备注不能为空", trigger: "blur" }
        ],
      }
    };
  },
  name: "glue-ide",
  created() {
    this.initCode()
  },
  watch: {
    showIde(value) {
      if(value == true) {
        this.initList()
      }
    }
  },
  methods: {
    getShow() {
      return this.show
    },
    getCode() {
      return this.glueCode
    },
    getRemark() {
      return this.codeRemark
    },
    submit() {
      this.$refs["remark"].validate(valid => {
        if (valid) {
          this.codeRemark = this.form.remark
          this.$emit('copeChange', this.glueCode)
          this.open = false
        }
      })
    },
    cancel() {
      this.show = false
      this.$emit('showChange', this.show)
    },
    save() {
      this.open = true
    },
    saveCancel() {
      this.form.remark = null
      this.open = false
    },
    initCode() {
      if (this.codeList[0].glueType === 'GLUE_GROOVY') {
        this.glueCode = `
package com.xxl.job.service.handler;

import com.xxl.job.core.context.XxlJobHelper;
import com.xxl.job.core.handler.IJobHandler;

public class DemoGlueJobHandler extends IJobHandler {

	@Override
	public void execute() throws Exception {
		XxlJobHelper.log("XXL-JOB, Hello World.");
	}

}
        `
      } else if (this.codeList[0].glueType === 'GLUE_SHELL') {
        this.glueCode = `
#!/bin/bash
echo "xxl-job: hello shell"

echo "脚本位置：$0"
echo "任务参数：$1"
echo "分片序号 = $2"
echo "分片总数 = $3"

echo "Good bye!"
exit 0
        `
      } else if (this.codeList[0].glueType === 'GLUE_PYTHON') {
        this.glueCode = `
#!/usr/bin/python
# -*- coding: UTF-8 -*-
import time
import sys

print "xxl-job: hello python"

print "脚本位置：", sys.argv[0]
print "任务参数：", sys.argv[1]
print "分片序号：", sys.argv[2]
print "分片总数：", sys.argv[3]

print "Good bye!"
exit(0)
        `
      } else if (this.codeList[0].glueType === 'GLUE_PHP') {
        this.glueCode = String.raw`
<?php

echo "xxl-job: hello php  \n";

echo "脚本位置：$argv[0]  \n";
echo "任务参数：$argv[1]  \n";
echo "分片序号 = $argv[2]  \n";
echo "分片总数 = $argv[3]  \n";

echo "Good bye!  \n";
exit(0);

?>
        `
      } else if (this.codeList[0].glueType === 'GLUE_NODEJS') {
        this.glueCode = `
#!/usr/bin/env node
console.log("xxl-job: hello nodejs")

var arguments = process.argv

console.log("脚本位置: " + arguments[1])
console.log("任务参数: " + arguments[2])
console.log("分片序号: " + arguments[3])
console.log("分片总数: " + arguments[4])

console.log("Good bye!")
process.exit(0)
        `
      } else if (this.codeList[0].glueType === 'GLUE_POWERSHELL') {
        this.glueCode = `
Write-Host "xxl-job: hello powershell"

Write-Host "脚本位置: " $MyInvocation.MyCommand.Definition
Write-Host "任务参数: "
	if ($args.Count -gt 2) { $args[0..($args.Count-3)] }
Write-Host "分片序号: " $args[$args.Count-2]
Write-Host "分片总数: " $args[$args.Count-1]

Write-Host "Good bye!"
exit 0
        `
      }
      this.glueId = this.codeList[0].jobId
      this.glueType = this.codeList[0].glueType
      if (this.codeList[0].id == null) {
        this.codeList = []
      }
    },
    initList() {
      this.codeList = this.glueCodeList
      if(this.codeList[0].glueType != this.glueType || this.codeList[0].jobId != this.glueId) {
        this.initCode()
      }
      this.form.remark = null
      if (this.codeList[0].id == null) {
        this.codeList = []
      }
    },
    glueTypeTran(type) {
      if (type == 'BEAN') {
        return 'BEAN'
      } else if (type == 'GLUE_GROOVY') {
        return 'GLUE(Java)'
      } else if (type == 'GLUE_SHELL') {
        return 'GLUE(Shell)'
      } else if (type == 'GLUE_PYTHON') {
        return 'GLUE(Python)'
      } else if (type == 'GLUE_PHP') {
        return 'GLUE(PHP)'
      } else if (type == 'GLUE_NODEJS') {
        return 'GLUE(Nodejs)'
      } else if (type == 'GLUE_POWERSHELL') {
        return 'GLUE(PowerShell)'
      }
    },
    versionChange(code) {
      this.glueCode = code
      const codes = this.glueCode.replace(/&lt/, '<')
      this.glueCode = codes.replace(/&gt/, '>')
    }
  }
};
</script>
